<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- <link rel="stylesheet" href="./font/iconfont.css">  -->
    <!-- <link rel="stylesheet" href="/chikan/src/css/style.css"> -->
    <link rel="stylesheet" href="./style.css">
    <title>赤坎</title>
  </head>
  <body>
    <nav class="shell close">
      <header>
          <div class="image-text">
              <span class="image">
                  <img src="../image/tupiao/赤坎.jpg" alt="">
              </span>
              <div class="text logo-text">
                  <span class="name">赤坎导览助手</span>
                  <span class="software">导听途说</span>
              </div>
          </div>
          <i class="iconfont icon-xiangyoujiantou toggle"></i>
      </header>
      <div class="menu-bar">
          <div class="menu">
              <li class="search-box">
                  <i class="iconfont icon-sousuo icon"></i>
                  <input type="text" placeholder="搜索...">
              </li>
              <ul class="menu-links">
                  <li class="nav-link">
                      <a href="#">
                          <i class="iconfont icon-shouye icon"></i>
                          <span class="text nac-text">主页</span>
                      </a>
                  </li>

                  <li class="nav-link">
                      <a href="#">
                          <i class="iconfont icon-xianlu icon"></i>
                          <span class="text nac-text">线路</span>
                      </a>
                  </li>

                  <li class="nav-link">
                      <a href="#">
                          <i class="iconfont icon-meishi icon"></i>
                          <span class="text nac-text">美食</span>
                      </a>
                  </li>

                  <li class="nav-link">
                      <a href="#">
                          <i class="iconfont icon-jingdian icon"></i>
                          <span class="text nac-text">景点</span>
                      </a>
                  </li>

                  <li class="nav-link">
                      <a href="#">
                          <i class="iconfont icon-jilu icon"></i>
                          <span class="text nac-text">浏览记录</span>
                      </a>
                  </li>

                  <li class="nav-link">
                      <a href="#">
                          <i class="iconfont icon-shoucang icon"></i>
                          <span class="text nac-text">我的收藏</span>
                      </a>
                  </li>
              </ul>
          </div>
          <div class="bottom-content">
              <li class="">
                  <a href="#">
                      <i class="iconfont icon-zhuxiaoyuan icon"></i>
                      <span class="text nac-text">注销</span>
                  </a>
              </li>
              <!-- <li class="mode">
                  <div class="sun-moon">
                      <i class="iconfont icon-rijian icon sun"></i>
                      <i class="iconfont icon-yejian icon moon"></i>
                  </div>
                  <span class="mode-text text">夜间模式</span>
                  <div class="toggle-switch">
                      <span class="switch"></span>
                  </div>
              </li> -->
          </div>
      </div>

  </nav>
  
  <!-- shell close  image-text image text logo-text name software 
       iconfont icon-xiangyoujiantou toggle menu-bar menu search-box
        icon-sousuo icon menu-links nav-link bottom-content  nac-text
        toggle-switch
    -->
<div id="container-bg"></div>

   <div id="background-image">
    <nav>
        <div class="search-title">
            <h1 class="logo">赤坎导览助手</h1>
            <h2  class="logo2">导听途说-传承非物质遗产文化</h2>
        </div>
        <div class="search-box2">
            <input type="text" placeholder="请输入目的地" class="search">
            <button class="search-buttom">搜索</button>
        </div>
    </nav>
   </div>


   <div class="title-luxian-head">推荐路线</div>

   <!-- 路线1 -->
               <div class="title-luxian">古建筑</div>

    <div class="container-luxian">
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian" style="background-image: url('../image/jingse/利士多.jpeg');"></a>
            <div class="content-luxian">    《隐秘的角落》取景地，让湛江这座城市两度“出圈”。有种复古破旧的场景感</div>
        </li>
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian" style="background-image: url('../image/jingse/朱朝阳.jpg');"></a>
            <div class="content-luxian">   作为《隐秘的角落》一个重要的地点，位于湛江赤坎老街的永宁路。为剧集提供了丰富的拍摄场景，成为了观众和游客热衷的打卡点。 </div>
        </li>
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/许爱周.jpg');"></a>
            <div class="content-luxian">     爱国商人许爱周先生的家，结合了中西式风格，目前被开设为“湛江古玩文化城”</div>
        </li>
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/利士多.jpeg');"></a>
            <div class="content-luxian">     这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字</div>
        </li>
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/利士多.jpeg');"></a>
            <div class="content-luxian">     这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字</div>
        </li>
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/利士多.jpeg');"></a>
            <div class="content-luxian">     这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字</div>
        </li>
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/利士多.jpeg');"></a>
            <div class="content-luxian">     这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字</div>
        </li>
        <li class="li-luxian luxian1">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/利士多.jpeg');"></a>
            <div class="content-luxian">     这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字</div>
        </li>

           
        </div> <button class="luxian-prev prev1">&lt;</button>
            <button class="luxian-next next1">&gt;</button>
    </div>
<!-- 路线2 -->
                     <div class="title-luxian">公园</div>

    <div class="container-luxian">
        <li class="li-luxian">
            <a href="#" class="image-luxian" style="background-image: url('../image/jingse/公园.jpg');"></a>
            <div class="content-luxian">    寸金公园作为赤坎区的一个重要公共空间，为当地居民和游客提供了休闲和娱乐的场所，也是体验赤坎区日常生活的一个好去处。</div>
        </li>
        <li class="li-luxian">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/老街.jpg');"></a>
            <div class="content-luxian">    古玩街聚集了众多售卖古董、文玩、字画等物品的商店和摊贩，是收藏爱好者和游客淘宝的好去处</div>
        </li>
        <li class="li-luxian">
            <a href="#" class="image-luxian" style="background-image: url('../image/jingse/新华书店.jpg');"></a>
            <div class="content-luxian">     这家书店位于充满历史风情的赤坎老街，周围环境古朴，书店本身也散发着一种旧时文化的气息。</div>
        </li>

          
        </div>  <button class="luxian-prev prev2">&lt;</button>
            <button class="luxian-next next2">&gt;</button>
    </div>
<!-- 路线3 -->
                  <div class="title-luxian">美食角</div>

    <div class="container-luxian">
        <li class="li-luxian">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/喜盈门.jpg');"></a>
            <div class="content-luxian">    喜盈门的甜品种类丰富，既有传统的口味，也有创新的融合风味，满足不同顾客的需求。在这里，顾客可以品尝到各种美味的糖水和甜品，享受一段轻松愉快的时光。</div>
        </li>
        <li class="li-luxian">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/菠萝街.jpg');"></a>
            <div class="content-luxian">    近几年的邻居节活动，让游客欣赏古韵犹存的老街，在这里感受老街的邻里温情和烟火气息</div>
        </li>
        <li class="li-luxian">
            <a href="#" class="image-luxian"style="background-image: url('../image/jingse/海鲜店.jpg');"></a>
            <div class="content-luxian">  这家店因其丰富的海鲜料和新鲜的食材而备受欢迎。顾客可以品尝到各种海鲜搭配的捞粉，其中特别推荐的是海鲜捞粉，以其足料和味道浓郁著称。   </div>
        </li>

        </div>
            <button class="luxian-prev prev3">&lt;</button>
            <button class="luxian-next next3">&gt;</button>
    </div>

    <!-- 景点 -->
    <div class="container-jingdian">
        <div class="panel active"
            style="background-image:url('../image/jingse/老街.jpg') ;">
            <h3>广州湾历史民俗馆</h3>
        </div>
        <div class="panel "
            style="background-image:url('../image/jingse/商会馆.jpg') ;">
            <h3>广州湾商会馆</h3>
        </div>
        <div class="panel "
            style="background-image:url('../image/jingse/利士多.jpeg') ;">
            <h3>本利士多店</h3>
        </div>
        <div class="panel "
            style="background-image:url('../image/jingse/菠萝街.jpg') ;">
            <h3>幸福路菠萝街</h3>
        </div>
        <div class="panel "
            style="background-image:url('../image/jingse/时间集物.jpg') ;">
            <h3>时间集物</h3>
        </div>

    </div>

<!-- shell close  image-text image text logo-text name software 
       iconfont icon-xiangyoujiantou toggle menu-bar menu search-box
        icon-sousuo icon menu-links nav-link bottom-content  nac-text
        toggle-switch container-jingdian panel container-luxian  
        li-luxian  image-luxian  content-luxian
    -->

<!-- 轮播图 -->
<div class="slider">
    <div class="slider-wrapper">
      <img src="../image/jingse/商会馆.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>商会馆</p>
      <ul class="slider-indicator">
        <li class="lunbo-active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="lunbo-toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>

  <!-- 要改 -->
  <div class="slider2">
    <div class="slider-wrapper2">
      <img src="../image/jingse/新华书店.jpg" alt="" />
    </div>
    <div class="slider-footer2">
      <p>新华书店</p>
      <ul class="slider-indicator2">
        <li class="lunbo-active2"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="lunbo-toggle2">
        <button class="prev2">&lt;</button>
        <button class="next2">&gt;</button>
      </div>
    </div>
  </div>



  <!-- 美食板块 -->
  <div class="container-meishi">
    <h1 class="title-meishi">美食介绍</h1>
    <div class="box-meishi">
        <div class="image-meishi" style="background-image: url('../image/meishi/捞粉.webp');"></div>
        <div class="content-meishi">   使用新鲜食材，各种肉类和海鲜，确保了粉的新鲜度和美味口感。
            口味可以根据个人偏好进行调整，配料丰富多样，可以添加花生、酸豆角、香菜、辣椒等。
            此外，捞粉的制作简便快捷，适合忙碌的生活节奏，同时价格亲民，是一种经济实惠的选择。</div>
    </div>
    <div class="box-meishi">
        <div class="image-meishi"style="background-image: url('../image/meishi/捞面.jpg');"></div>
        <div class="content-meishi">和捞粉一样采用新鲜食材，有着不同的韧性口感，酱香料足。</div>
    </div>
    <div class="box-meishi">
        <div class="image-meishi"style="background-image: url('../image/meishi/海鲜粥.jpg');"></div>
        <div class="content-meishi">海鲜粥的鲜甜和米的香味交融，搭配油条食用最佳。</div>
    </div>
    <div class="box-meishi">
        <div class="image-meishi"style="background-image: url('../image/meishi/生蚝鸡煲.jpg');"></div>
        <div class="content-meishi">生蚝和鸡都下够重本，选用走地鸡和湛江本地新鲜生蚝，暖胃又暖心。</div>
    </div>
    <div class="box-meishi">
        <div class="image-meishi"style="background-image: url('../image/meishi/芒果椰汁西米露.webp');"></div>
        <div class="content-meishi">在夏季的不二之选，半块芒果搭配椰汁西米露，口感好，整体清新。让人一解暑气。</div>
    </div>
    <div class="box-meishi">
        <div class="image-meishi"style="background-image: url('../image/meishi/芋圆椰汁西米露.jpg');"></div>
        <div class="content-meishi">椰香味浓郁，Q弹香甜的芋圆，爽口的西米，搭配超绝</div>
    </div>
    <div class="box-meishi">
        <div class="image-meishi"style="background-image: url('../image/meishi/椰汁豆腐花.jpg');"></div>
        <div class="content-meishi">口感绵软幼滑香甜，有豆香气，和椰汁搭配的恰到好处，每一口味道都很丰富。</div>
    </div>
  
  </div>
 


     <script src="./script.js">
     

     </script>
  </body>
</html>
